<template>
  <div class="main">
    <div class="df aic jcsb pr">
      <p class="main_text">概况</p>
      <el-button  type='primary'
                  @click="largeScreen"
      >进入大屏数据展示</el-button
      >
    </div>
    <div class="content">
      <el-row :gutter="10">
        <el-col :span="8"  :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
          <div class="content-flex">
          <div style="display: flex;">
            <div class="content-left1" style="flex: 1; ">
              <p>平台充值金额</p>
              <Echarts_survey_1></Echarts_survey_1>
            </div>
            <div class="content-left2" style="flex: 1">
              <p >商品拆解率</p>
              <Echarts_survey_5></Echarts_survey_5>
            </div>
          </div>
          <div class="content-left3" style="flex:1;margin-top: 10px">
            <p>拆解资源占比</p>
            <Echarts_survey_4></Echarts_survey_4>
          </div>
        </div>
        </el-col>
        <el-col :span="8"  :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px" >
          <div class="content-flex" >
          <div style="display: flex;flex: 1;flex-wrap: wrap;">
            <div class="content-center1 " style="flex: 1;margin-right: 10px">
              <div class="detailStyle">
                <div class="title">本月积累拆车</div>
                <p class="num">{{ topFormData.本月拆车 }}</p>
                <div class="df detail">
                  <p>
                    上月<span>{{ topFormData.上月拆车 }}</span>
                  </p>
                  &emsp;
                  <p>
                    同比上月<span>{{ topFormData.对比上月拆车 }}%</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="content-center2"  style="flex: 1;">
              <div class="detailStyle">
                <div class="title">本日积累拆车</div>
                <p class="num">{{ topFormData.本日拆车 }}</p>
                <div class="df detail">
                  <p>
                    昨日<span>{{ topFormData.昨日拆车 }}</span>
                  </p>
                  &emsp;
                  <p>
                    同比昨日<span>{{ topFormData.对比昨日拆车 }}%</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="content-center5 pr" >
<!--            <div>报废车统计</div>-->
            <div class="df aic jcsb p10">
              <div
                style="
                    font-size: 14px;
                    z-index: 200;
                    user-select: none;
                    cursor: pointer;
                  "
                @click="routeCar"
              >
                报废车统计
              </div>
              <div class="fifth_list_li" @click="scrapCarMoreDetail">
                更多详情
              </div>
            </div>
            <Echarts_survey_7></Echarts_survey_7>
            <div class="tips df">
              <div
                class="tips_l"
                v-for="(item, index) in scrapCar"
                :key="index"
              >
                <p>
                    <span>{{ item.value }}</span
                    >&nbsp;{{ item.name }}
                </p>
              </div>
            </div>
          </div>
          <div class="content-center6 pr" >
<!--            <div>原材料统计</div>-->
            <div class="df aic jcsb p10">
              <div style="font-size: 14px">原材料统计</div>
              <div class="fifth_list_li" @click="materialMoreDetail">
                更多详情
              </div>
            </div>
            <Echarts_survey_9></Echarts_survey_9>
            <div class="tips df">
              <div
                class="tips_l"
                v-for="(item, index) in material"
                :key="index"
              >
                <p>
                    <span>{{ item.value }}</span
                    >&nbsp;{{ item.name }}
                </p>
              </div>
            </div>
          </div>
        </div></el-col>
        <el-col :span="8"  :lg="8" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
          <div class="content-flex"  >
          <div style="display: flex;flex: 1;flex-wrap: wrap">
            <div class="content-center3" style="flex: 1;margin-right: 10px">
              <div class="detailStyle">
                <div class="title">本月积累收车</div>
                <p class="num">{{ topFormData.本月收车 }}</p>
                <div class="df detail">
                  <p>
                    上月<span>{{ topFormData.上月收车 }}</span>
                  </p>
                  &emsp;
                  <p>
                    同比上月<span>{{ topFormData.对比上月收车 }}%</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="content-center4" style="flex: 1">
              <div class="detailStyle">
                <div class="title">本月积累拆车</div>
                <p class="num">{{ topFormData.本月拆车 }}</p>
                <div class="df detail">
                  <p>
                    上月<span>{{ topFormData.上月拆车 }}</span>
                  </p>
                  &emsp;
                  <p>
                    同比上月<span>{{ topFormData.对比上月拆车 }}%</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="content-center7 pr" style="">
<!--            <div>配件统计</div>-->
            <div class="df aic jcsb p10">
              <div style="font-size: 14px">配件统计</div>
              <div class="fifth_list_li" @click="partsMoreDetail">
                更多详情
              </div>
            </div>
            <Echarts_survey_8></Echarts_survey_8>
            <div class="tips df">
              <div
                class="tips_l"
                v-for="(item, index) in partsArr"
                :key="index"
              >
                <p>
                    <span>{{ item.value }}</span
                    >&nbsp;{{ item.name }}
                </p>
              </div>
            </div>
          </div>
          <div class="content-center8 pr" style="">
<!--            <div>危固废统计</div>-->
            <div class="df aic jcsb p10">
              <div style="font-size: 14px">危固废统计</div>
              <div class="fifth_list_li" @click="wasteMoreDetail">
                更多详情
              </div>
            </div>
            <Echarts_survey_10></Echarts_survey_10>
            <div class="tips df">
              <div
                class="tips_l"
                v-for="(item, index) in wasteList"
                :key="index"
              >
                <p>
                    <span>{{ item.value }}</span
                    >&nbsp;{{ item.name }}
                </p>
              </div>
            </div>
          </div>
        </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
          <div class="list_2_l  df fdc jcsb">
          <div class="df jcsb aic" >
            <div style="font-size: 14px;padding: 10px 0">当前拆解情况</div>
            <div style="color: #b2b2b2; font-size: 12px">
              最近更新：{{ DismantlingTableDataTime }}
            </div>
          </div>
          <el-table
            :data="DismantlingTableData"
            style="width: 100%"
            :header-cell-style="{ background: '#000' }"

          >
            <el-table-column
              prop="carInfo.incomeId"
              label="入场编号"
              show-overflow-tooltip
            />
            <el-table-column
              prop="carInfo.carInfo.value.号牌号码"
              label="当前拆解车"

            />
            <el-table-column
              prop="disassemblySheet.status"
              label="拆解进度"
            />
          </el-table>
          </div>
        </el-col>
        <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
          <div class="list_2_l  df fdc jcsb" >
                        <div class="df jcsb aic">
                          <div style="font-size: 14px; padding: 10px 0">当前溯源件入库情况</div>
                          <div style="color: #b2b2b2; font-size: 12px">
                            最近更新：{{ fittingsArrtime }}
                          </div>
                        </div>
                        <el-table
                          :data="fittingsArr"
                          style="width: 100%"
                          :header-cell-style="{ background: '#000' }"
                        >
                          <el-table-column
                            prop="fittingId"
                            label="编号"
                            show-overflow-tooltip
                          />
                          <el-table-column
                            prop="fittingName"
                            label="名称"
                            show-overflow-tooltip
                          />
                          <el-table-column
                            prop="typeName"
                            label="类型"
                            show-overflow-tooltip
                          />
                          <el-table-column
                            prop="brand"
                            label="品牌"
                            show-overflow-tooltip
                          />
                          <el-table-column
                            prop="modelName"
                            label="车型"
                            show-overflow-tooltip
                          />
                          <el-table-column
                            prop="series"
                            label="车系"
                            show-overflow-tooltip
                          />
                        </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
          <div class="list_2_l ">
            <div class="df aic jcsb">
              <div style="font-size: 14px">近一周收拆量趋势</div>
              <div style="color: #b2b2b2; font-size: 12px">近一周数据</div>
            </div>
              <Echarts_survey_2 ></Echarts_survey_2>
          </div>
        </el-col>
        <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
          <div class="list_2_l br8">
            <div class="df aic jcsb">
              <div style="font-size: 14px">收车结算统计</div>
              <div style="color: #b2b2b2; font-size: 12px">近12月数据</div>
            </div>
            <div class="df jcsb">
                  <Echarts_survey_3></Echarts_survey_3>
              <div class="second_list_right">
                <div class="second_list_right_r pl10 pr10">
                  <p style="font-size: 10px; color: #414141" class="textOver">
                    本月结算单总金额
                  </p>
                  <p
                    style="font-size: 10px; color: #b2b2b2; margin: 0px"
                    class="textOver"
                  >
                    <span style="font-size: 14px; color: #000">{{
                        parseFloat((settleData.本月总金额 / 10000).toFixed(2))
                      }}</span
                    >万元
                  </p>
                  <p style="font-size: 10px; color: #b2b2b2" class="textOver">
                    <span style="color: #f56c6c"
                    >↓↑{{
                        parseFloat((settleData.同上月比较 * 100).toFixed(2))
                      }}%</span
                    >较上个月
                  </p>
                </div>
                <div class="second_list_right_r p4 pl10 pr10">
                  <p style="font-size: 10px; color: #414141">已付款</p>
                  <p
                    style="font-size: 10px; color: #b2b2b2; margin: 0px"
                    class="textOver"
                  >
                    <span style="font-size: 14px; color: #000">{{
                        parseFloat((settleData.已付款 / 10000).toFixed(2))
                      }}</span
                    >万元
                  </p>
                  <!-- <p style="font-size: 10px;color: #B2B2B2;" class="textOver">总计102吨(暂无数据)</p> -->
                </div>
                <div class="second_list_right_r p4 pl10 pr10">
                  <p style="font-size: 10px; color: #414141">未付款</p>
                  <p
                    style="font-size: 10px; color: #b2b2b2; margin: 0px"
                    class="textOver"
                  >
                    <span style="font-size: 14px; color: #000">{{
                        parseFloat((settleData.未付款 / 10000).toFixed(2))
                      }}</span
                    >万元
                  </p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { formatTime, formatTimeAll } from '@/filters/index'
import { useRouter } from 'vue-router'
import {
  RequestStatisticGetTopMessage,
  RequestStatisticGetPriceOfSettle,
  RequestStatisticGetMaterialScale,
  RequestFittingsGetlistlimit,
  RequestStatisticGetWasteScale,
  RequestStatisticGetCarScale,
  RequestStatisticGetPieChartData,
  RequestEmployeeGetFunctionAuthorize,
} from '@/api/path/index.js'
import Echarts_survey_1 from '@/components/home/Echarts_survey_1.vue'
import Echarts_survey_2 from '@/components/home/Echarts_survey_2.vue'
import Echarts_survey_3 from '@/components/home/Echarts_survey_3.vue'
import Echarts_survey_4 from '@/components/home/Echarts_survey_4.vue'
import Echarts_survey_5 from '@/components/home/Echarts_survey_5.vue'
import Echarts_survey_6 from '@/components/home/Echarts_survey_6.vue'
import Echarts_survey_7 from '@/components/home/Echarts_survey_7.vue'
import Echarts_survey_8 from '@/components/home/Echarts_survey_8.vue'
import Echarts_survey_9 from '@/components/home/Echarts_survey_9.vue'
import Echarts_survey_10 from '@/components/home/Echarts_survey_10.vue'
const router = useRouter()
const topFormData = ref<any>({}) //顶部数据
const DismantlingTableData = ref<any>([]) //顶部拆接中的车辆
const DismantlingTableDataTime = ref<any>('')
const settleData = ref<any>({})
const wasteList = ref<any>([]) //危固废
const scrapCar = ref<any>([]) //报废车
const partsArr = ref<any>([]) //配件统计
const material = ref<any>([]) //原材料统计
const fittingsArr = ref<any>([]) //溯源件
const fittingsArrtime = ref<any>('') //溯源件
const getData = () => {
  RequestStatisticGetTopMessage().then((res: any) => {
    res.resultObj.对比昨日收车 = parseFloat(
      res.resultObj.对比昨日收车.toFixed(2)
    )
    res.resultObj.对比昨日拆车 = parseFloat(
      res.resultObj.对比昨日拆车.toFixed(2)
    )
    res.resultObj.对比上月收车 = parseFloat(
      res.resultObj.对比上月收车.toFixed(2)
    )
    res.resultObj.对比昨日拆车 = parseFloat(
      res.resultObj.对比昨日拆车.toFixed(2)
    )
    res.resultObj.拆解中车辆.data[0].carInfo.carInfo.value = JSON.parse(
      res.resultObj.拆解中车辆.data[0].carInfo.carInfo.value
    )
    DismantlingTableDataTime.value = formatTimeAll(
      res.resultObj.拆解中车辆.data[0].disassemblySheet.updatedAt
    )
    topFormData.value = res.resultObj
    console.log(11111111111111,topFormData.value)
    DismantlingTableData.value = res.resultObj.拆解中车辆.data
  })
  RequestStatisticGetPriceOfSettle().then((res: any) => {
    settleData.value = res.resultObj
  })
  /* 报废车统计 */
  RequestStatisticGetCarScale().then((res: any) => {
    scrapCar.value = res.resultObj
  })
  /* 原材料统计 */
  const materialAll = ref<any>(0)
  RequestStatisticGetMaterialScale().then((res: any) => {
    res.resultObj.forEach((item: any) => {
      if (item.name == '钢铁') {
        material.value.push({
          name: '钢铁',
          value: item.value,
        })
      } else if (item.name == '铜') {
        material.value.push({
          name: '铜',
          value: item.value,
        })
      } else if (item.name == '铝') {
        material.value.push({
          name: '铝',
          value: item.value,
        })
      } else {
        materialAll.value += item.value
      }
    })
    material.value.push({
      name: '其他',
      value: materialAll.value,
    })
  })
  /* 危固废统计 */
  const wasteAll = ref<any>(0)
  RequestStatisticGetWasteScale().then((res: any) => {
    res.resultObj.forEach((item: any) => {
      console.log(item)
      if (item.name == '机油') {
        wasteList.value.push({
          name: '机油',
          value: item.value,
        })
      } else if (item.name == '汽油') {
        wasteList.value.push({
          name: '汽油',
          value: item.value,
        })
      } else if (item.name == '柴油') {
        wasteList.value.push({
          name: '柴油',
          value: item.value,
        })
      } else {
        wasteAll.value += item.value
      }
    })
    wasteList.value.push({
      name: '其他',
      value: wasteAll.value,
    })
    console.log(wasteList.value)
  })
  // 拆解资源占比
  RequestStatisticGetPieChartData().then((res: any) => {
    res.resultObj.forEach((item: any) => {
      if (item.name == '溯源件' || item.name == '非溯源件') {
        partsArr.value.push(item)
      }
    })
  })
  // 拆解资源占比

  RequestFittingsGetlistlimit({
    page: 1,
    rows: 1,
  }).then((res: any) => {
    fittingsArr.value = res.resultObj.data
    fittingsArrtime.value = formatTimeAll(res.resultObj.data[0].createdAt)
    console.log(' res.resultObj.data', res.resultObj.data)
  })
}
getData()
const echartsWidth = ref('')
const echartsHeight = ref('')
const widthWight = (width: string, height: string) => {
  console.log(width)
  console.log(height)
  echartsWidth.value = width
  echartsHeight.value = height
  console.log(echartsWidth.value)
  console.log(echartsHeight.value)
}
const largeScreen = () => {
  router.push('/largeScreen')
}
/************************** 配件统计 **************************/
const partsMoreDetail = () => {
  router.push('/Home/partsScreen')
}
/************************** 原材料统计 **************************/
const materialMoreDetail = () => {
  router.push('/Home/materialScreen')
}
/************************** 原材料统计 **************************/
const wasteMoreDetail = () => {
  router.push('/Home/wasteScreen')
}
/************************** 报废车统计 **************************/
const scrapCarMoreDetail = () => {
  router.push('/Home/scrapCarScreen')
}

const routeCar = () => {
  router.push('/Storage/Storage_carputin')
}
// 屏幕宽度
const windowWidth = ref(0)
// 屏幕高度
const windowHeight = ref(0)
const width = ref<any>()
const height = ref<any>()
const heightBody = ref<any>()
// 生命周期
onMounted(() => {
  getWindowResize()
  window.addEventListener('resize', getWindowResize)
})
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth
  windowHeight.value = window.innerHeight
  if (windowHeight.value <= 786) {
    height.value = '471.5904px'
    // heightBody.value = '484.8px'
  } else {
    height.value = '60%'
    heightBody.value = '60%'
  }
  if (windowWidth.value <= 1542) {
    width.value = '1276px'
  } else {
    width.value = '100%'
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  //height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  .content {
    .content-flex{
      flex: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      p{
        white-space: nowrap;
        //font-size: 1rem;
        padding: 10px;
      }
    }
    .content-left1{
      margin-right: 10px;
      background-color: white;
      border-radius: 5px;
    }
    .content-left2{
      border-radius: 5px;
      background-color: white;
    }
    .content-left3{
      border-radius: 5px;
      background-color: white;
    }
    .content-center1{
      border-radius: 5px;
      background-color: white;
      //margin-right: 10px;
    }
    .content-center2{
      border-radius: 5px;
      background-color: white;
    }
    .content-center3{
      border-radius: 5px;

      background-color: white;
    }
    .content-center4{
      border-radius: 5px;
      background-color: white;
    }
    .content-center5{
      border-radius: 5px;
      margin-top: 10px;
      background-color: white;
    }
    .content-center6{
      border-radius: 5px;
      margin-top: 10px;
      background-color: white;
    }
    .content-center7{
      border-radius: 5px;
      margin-top: 10px;
      background-color: white;
    }
    .content-center8{
      border-radius: 5px;
      margin-top: 10px;
      background-color: white;
    }

      .list_2_l {
      background-color: white;padding: 10px;border-radius: 5px;
      }

  }
}


.second_list_right {
  padding-top: 35px;

  .second_list_right_r {
    width: 100%;
    // height: 26%;
    background-color: rgb(247, 248, 250);
    margin-bottom: 6px;
    border-radius: 4px;
  }
}
//
.fifth_list_li {
  color: #b2b2b2;
  font-size: 12px;
  position: relative;
  z-index: 1000;
  cursor: pointer;
  user-select: none;
}

.detailStyle {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    font-size: 14px;
    color: #b2b2b2;
    padding: 10px;
  }

  .num {
    font-size: 18px;
  }

  .detail {

    p {
      &:first-child {
        font-size: 12px;
        color: #b2b2b2;

        span {
          color: #000;
        }
      }

      &:last-child {
        font-size: 12px;
        color: #b2b2b2;

        span {
          color: #000;
        }
      }
    }
  }
}
.tips {
  position: absolute;
  bottom: 0;
  right: 0;

  .tips_l {
    background-color: #f7f8fa;
    padding: 4px 0;

    p {
      color: #b2b2b2;
      font-size: 10px;
      padding: 0 10px !important;
      border-right: 1px #b2b2b2 dashed;

      span {
        color: #000;
        font-size: 12px;
      }
    }

    &:first-child {
      border-radius: 4px 0 0 0;
    }

    &:last-child {
      border-radius: 0 0 4px 0;

      p {
        border-right: none;
      }
    }
  }
}
</style>
